<template>
    <section class="bk-layout-custom-component-wrapper container-nbmogmmj">
        <div class="bk-layout-component-nbmogmmj block1a0be">
            <span title="" class="bk-layout-component-nbmogmmj text8644c">
                {{ postTitle }}
            </span>
        </div>
        <div class="bk-layout-component-nbmogmmj block967d5">
            <!-- eslint-disable -->
            <!-- prettier-ignore -->
            <p title=""   class='bk-layout-component-nbmogmmj paragraph56e1e'>{{postContent}}</p>
            <!-- eslint-enable -->
        </div>
        <div class="bk-layout-component-nbmogmmj block18bfb">
            <bk-divider
                direction="horizontal"
                align="left"
                color="#dde4eb"
                class="bk-layout-component-nbmogmmj divider072c7">
                评论
            </bk-divider>
        </div>
        <div class="bk-layout-component-nbmogmmj blockF775f">
            <bk-input
                type="textarea"
                font-size="medium"
                :disabled="false"
                :readonly="false"
                :clearable="true"
                :show-controls="true"
                class="bk-layout-component-nbmogmmj inputC799b"
                v-model="commentContent">
            </bk-input>
            <bk-button
                title="hello world"
                size="normal"
                theme="primary"
                :disabled="false"
                :loading="false"
                class="bk-layout-component-nbmogmmj buttonF3a4b"
                @click="(...args) => addCommentData(args[0], ...args)">
                提交评论
            </bk-button>
        </div>

        <div
            class="bk-free-layout-nbmogmmj free-layout-d1921"
            v-for="(freeLayoutD1921Item, freeLayoutD1921Index) in commentList"
            :key="freeLayoutD1921Index">
            <div style="position: absolute; top: 10px; left: 0px; width: 100%;">
                <div class="bk-layout-component-nbmogmmj blockF8a9d">
                    <span title="" class="bk-layout-component-nbmogmmj text79242">
                        {{ freeLayoutD1921Item.createUser }}
                    </span>
                    <span title="" class="bk-layout-component-nbmogmmj text5afb3">
                        {{ freeLayoutD1921Item.createTime }}
                    </span>
                </div>
            </div>
            <div style="position: absolute; top: 40px; left: 0px;">
                <div class="bk-layout-component-nbmogmmj blockEf6e4">
                    <!-- eslint-disable -->
                    <!-- prettier-ignore -->
                    <p title=""   class='bk-layout-component-nbmogmmj paragraph6cb6d'>{{freeLayoutD1921Item.content}}</p>
                    <!-- eslint-enable -->
                </div>
            </div>
        </div>
    </section>
</template>
<script>
    /**
     * 请先安装 bk-magic-vue 组件库、bkui-vue-complex 复合组件库
     * bk-magic-vue 组件库: https://magicbox.bk.tencent.com/static_api/v3/components_vue/2.0/example/index.html#/install
     * bkui-vue-complex 复合组件库: https://github.com/TencentBlueKing/lesscode-comp
     *
     * 如果页面使用了远程函数，单独使用本页面，需要确保项目 store 下有相应的方法，后端有相应的转发接口
     */

    import methodsMixin from '@/mixins/methods-mixin'
    export default {
        mixins: [methodsMixin],
        data () {
            function getInitVariableValue (defaultValue, defaultValueType) {
                let val = defaultValue.all
                if (defaultValueType === 1) val = defaultValue[window.BKPAAS_ENVIRONMENT]
                return val
            }
            return {
                postTitle: getInitVariableValue({ all: '', prod: '', stag: '' }, 0),
                postContent: getInitVariableValue({ all: '', prod: '', stag: '' }, 0),
                commentContent: getInitVariableValue({ all: '', prod: '', stag: '' }, 0),
                commentList: getInitVariableValue(
                    { all: [], prod: ['Jack', 'Lucy', 'Lily'], stag: ['Jack', 'Lucy', 'Lily'] },
                    0
                ),
                postId: getInitVariableValue({ all: 0, prod: 0, stag: 0 }, 0)
            }
        },

        created () {
            this.getData()
        }
    }
</script>
<style lang="css" scoped>
    .container-nbmogmmj {
        padding-left: 200px;
        padding-right: 200px;
        padding-top: 20px;
        padding-bottom: 0px;
        height: 100%;
    }
    .bk-layout-row-nbmogmmj {
        display: flex;
    }
    .bk-layout-row-nbmogmmj:after {
        display: block;
        clear: both;
        content: '';
        font-size: 0;
        height: 0;
        visibility: hidden;
    }
    .bk-layout-col-nbmogmmj {
        float: left;
        position: relative;
        min-height: 1px;
    }
    .bk-free-layout-nbmogmmj {
        height: 500px;
        width: 100%;
        display: inline-block;
        position: relative;
    }
    .bk-free-layout-item-inner-nbmogmmj {
        height: 100%;
        position: relative;
    }
    .bk-form-radio {
        margin-right: 20px;
    }
    .bk-form-checkbox {
        margin-right: 20px;
    }
    .echarts {
        width: 100%;
        height: 100%;
    }
    /* 设置 bk-exception 组件宽度为 100% */
    .bk-exception-img {
        width: 100%;
    }
    .bk-form-item {
        margin: 10px;
    }
    .bk-sideslider {
        margin: 0;
    }
    /* 设置 .bk-form-control 组件宽度为 auto */
    .bk-form-control {
        width: auto;
    }
    .bk-form-control .bk-input-text {
        font-size: 12px;
    }
    [align-horizontal-left] > *,
    [align-horizontal-center] > *,
    [align-horizontal-right] > *,
    [align-horizontal-space-between] > *,
    [align-vertical-top] > *,
    [align-vertical-center] > *,
    [align-vertical-bottom] > * {
        flex-shrink: 0;
    }
    [align-horizontal-left],
    [align-horizontal-center],
    [align-horizontal-right],
    [align-horizontal-space-between] {
        display: flex !important;
        align-items: flex-start;
        flex-wrap: wrap;
    }
    [align-horizontal-left] {
        justify-content: flex-start;
    }
    [align-horizontal-center] {
        justify-content: center;
    }
    [align-horizontal-right] {
        justify-content: flex-end;
    }
    [align-horizontal-space-between] {
        justify-content: space-between;
    }
    [align-vertical-top],
    [align-vertical-center],
    [align-vertical-bottom] {
        display: flex !important;
        flex-wrap: wrap;
    }
    [align-vertical-top] {
        align-items: flex-start;
    }
    [align-vertical-center] {
        align-items: center;
    }
    [align-vertical-bottom] {
        align-items: flex-end;
    }
    [absolute-align-horizontal-left] {
        left: 0 !important;
    }
    [absolute-align-horizontal-center] {
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
    [absolute-align-horizontal-right] {
        left: unset !important;
        right: 0 !important;
    }
    [absolute-align-vertical-top] {
        top: 0 !important;
    }
    [absolute-align-vertical-center] {
        top: 50% !important;
        transform: translateY(-50%) !important;
    }
    [absolute-align-vertical-bottom] {
        top: unset !important;
        bottom: 0 !important;
    }
    [absolute-align-horizontal-center][absolute-align-vertical-center] {
        transform: translate(-50%, -50%) !important;
    }

    .bk-layout-component-nbmogmmj.block1a0be {
        display: block;
        width: 100%;
        margin-top: 8px;
    }
    .bk-layout-component-nbmogmmj.text8644c {
        display: inline-block;
        text-align: center;
        font-size: 20px;
        vertical-align: middle;
        margin-top: 0px;
        margin-left: 0;
        width: 100%;
        font-style: normal;
        font-weight: bolder;
    }
    .bk-layout-component-nbmogmmj.block967d5 {
        display: block;
        width: 100%;
        margin-top: 8px;
    }
    .bk-layout-component-nbmogmmj.paragraph56e1e {
        display: inline-block;
        width: 100%;
        height: 102px;
        text-align: left;
        font-size: 16px;
        white-space: pre-wrap;
        word-break: break-all;
        margin-left: 0;
        text-indent: 20px;
        margin-top: 20px;
        margin-bottom: 20px;
        background-color: white;
        padding: 10px;
    }
    .bk-layout-component-nbmogmmj.block18bfb {
        display: block;
        width: 100%;
        margin-top: 8px;
    }
    .bk-layout-component-nbmogmmj.divider072c7 {
        display: block;
        margin-top: 20px;
        margin-bottom: 20px;
    }
    .bk-layout-component-nbmogmmj.blockF775f {
        display: block;
        width: 100%;
        margin-top: 8px;
    }
    .bk-layout-component-nbmogmmj.inputC799b {
        display: inline-block;
        vertical-align: middle;
        width: 100%;
        margin-left: 0;
        font-size: 20px;
    }
    .bk-layout-component-nbmogmmj.buttonF3a4b {
        display: inline-block;
        vertical-align: middle;
        margin-top: 8px;
        margin-left: 5px;
        margin-bottom: 5px;
    }
    .free-layout-d1921 {
        height: 154px;
        margin-top: 8px;
        margin-left: 0;
        width: 100%;
        background-color: white;
        border-bottom: 1px solid rgb(211, 211, 211);
    }
    .bk-layout-component-nbmogmmj.blockF8a9d {
        display: block;
        width: 100%;
    }
    .bk-layout-component-nbmogmmj.text79242 {
        display: inline-block;
        text-align: center;
        font-size: 15px;
        vertical-align: middle;
        margin-left: 20px;
        font-style: italic;
        font-weight: bolder;
    }
    .bk-layout-component-nbmogmmj.text5afb3 {
        display: inline-block;
        text-align: center;
        font-size: 14px;
        vertical-align: middle;
        margin-left: 0;
        width: 422px;
        color: rgba(200, 200, 200, 200);
    }
    .bk-layout-component-nbmogmmj.blockEf6e4 {
        display: block;
        right: 0;
    }
    .bk-layout-component-nbmogmmj.paragraph6cb6d {
        display: inline-block;
        width: 100%;
        height: 102px;
        text-align: left;
        font-size: 14px;
        white-space: pre-wrap;
        word-break: break-all;
        margin-right: 20%;
        margin-left: 20px;
    }
</style>
